<template>
  <basic-modal v-bind="$attrs" show-confirm @confirm="handleConfirm">
    <n-space vertical>
      <div
        class="question-item"
        v-for="checkResult in ownCheckList"
        :key="checkResult[uniqueKey]"
        :class="{
          'question-item--active': checkResult[checkSelectedKey] === '1',
        }"
        @click.stop="handleClickItem(checkResult)"
      >
        <span class="font-bold leading-[28px]">
          <slot name="name" :checkResult="checkResult"></slot>
        </span>
        <n-icon
          size="24"
          :color="CommonConfig.primaryColor"
          v-show="checkResult[checkSelectedKey] === '1'"
        >
          <CheckmarkCircleSharp />
        </n-icon>
      </div>
    </n-space>
  </basic-modal>
</template>
<script setup lang="ts">
import { ref, useAttrs, watch } from "vue";
import CommonConfig from "@/config/uiTheme/common";
import { CheckmarkCircleSharp } from "@vicons/ionicons5";
import { ICheckResultModalProps } from "./props";
import { cloneDeep } from "lodash-es";

const props = withDefaults(defineProps<ICheckResultModalProps>(), {
  uniqueKey: "id",
  checkSelectedKey: "result",
  canEdit: false,
});

const $emits = defineEmits(["confirm"]);
const $attrs = useAttrs();

const ownCheckList = ref<any[]>([]);

watch([() => $attrs.show, () => props.checkResultList], ([newShow]) => {
  if (newShow) {
    ownCheckList.value = cloneDeep(props.checkResultList);
  }
});

const handleClickItem = (checkResult: any) => {
  if (props.canEdit) {
    checkResult[props.checkSelectedKey] =
      checkResult[props.checkSelectedKey] === "1" ? "0" : "1";
  }
};

const handleConfirm = () => {
  $emits("confirm", ownCheckList.value);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
